如何看待vue |
您所在的位置：网站首页 › vue admin element 路由 › 如何看待vue |
如何看待vue
|
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 目录结构├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json安装# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 启动项目 npm run dev运行后看到如下代码：  修改vue.config.js文件中的代码devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js')
},
修改为：
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: { //跨域代理设置
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8888`, //这里的是接口域名
changeOrigin: true, //允许跨域
pathRewrite: {
[;^; + process.env.VUE_APP_BASE_API]: ;;
}
}
}
// before: require('./mock/mock-server.js') 此处为mock数据调用，将其注释，调用自己的接口自己的接口// 登录 登录接口一定要按照以下返回，框架本身要求的返回的数据结构是这样的
app.post(;/user/login;, function (req, res) {
const data={
;code;:20000,
;data;:{
;roles;:[;editor;],
;token;:req.session.token,
;introduction;:;I am a super administrator;,
;avatar;:;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif;,
;name;:;Super Admin;
}
}
const data = {
code: 20000,
data: {
token: ;asasasasas;,
},
};
res.json(data);
});
// 拉取用户信息
//这个接口的目的是登陆成功后调用自己的接口获取用户信息
app.get(;/user/info;, function (req, res) {
const data = {
code: 20000,
data: {
roles: [;editor;],
introduction: ;I am a super administrator;,
avatar:
;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif;,
name: ;Super Admin;,
},
};
res.json(data);
});
// const { roles, name, avatar, introduction } = data
// 退出登录
app.post(;/user/logout;, function (req, res) {
res.json({ code: 20000, message: ;success; });
});客户端修改调用自己的接口src/api/user.js原来的代码 import request from '@/utils/request' export function login(data) { return request({ url: '/vue-element-admin/user/login', method: 'post', data }) } export function getInfo(token) { return request({ url: '/vue-element-admin/user/info', method: 'get', params: { token } }) } export function logout() { return request({ url: '/vue-element-admin/user/logout', method: 'post' }) }将其修改为以下: import request from ;@/utils/request;; // 修改后的登录接口 export function login(data) { return request({ url: ;/user/login;, method: ;post;, data }); } // 修改后的用户信息接口 export function getInfo(token) { return request({ url: ;/user/info;, method: ;get;, params: { token } }); } // 修改后的退出登录接口 export function logout() { return request({ url: ;/user/logout;, method: ;post; }); }然后执行npm run dev 此时就是调用自己的接口，然后可以对框架进行扩展使用，其他的部分是由框架帮我们实现的 登陆页面接口调用handleLogin() { this.$refs.loginForm.validate(valid =; { if (valid) { this.loading = true this.$store.dispatch('user/login', this.loginForm) .then(() =; { this.$router.push({ path: this.redirect || '/', query: this.otherQuery }) this.loading = false }) .catch(() =; { this.loading = false }) } else { console.log('error submit!!') return false } }) }登陆页面通过调用vuex的actions中user命名空间下的login方法实现登录功能，src/permission.js是路由全局首位，对页面进行拦截判断是否登录，如果没有登录，则跳转到登陆页面，登陆成功后在每个路由中判断是否有用户信息，如果没有用户信息则无法进入页面，需要用户信息角色，用来对菜单进行展示。（路由菜单分为同步菜单和异步菜单，分别用来对公共路由和私有权限路由进行展示，从而实现角色关联权限，权限关联菜单）。 陆神这里还提供海量学习资料包（教程+源码+学习笔记+工具+课件+面试题解析）免费领取，请用手机端知乎点击上方链接即可获得，还有大牛讲师在线答疑免费辅导！ |
【本文地址】
今日新闻 |
推荐新闻 |